<template name='user_descr'>
	<view style="display: flex;    height: 100%;">

		<!-- 商品信息-右边 -->
		<view class="box-infos font12  " >

				<view class="content-box" >
					<view class="boxsss100" >
						<view class="beiwanglu background-fff">
							<view class="searchBoxs ">
								<textarea
								v-model="descr" 
								placeholder="输入内容"
								placeholder-class="placeholder-class"
								class="search-bot "
								style="margin-right: 10px;"
								maxlength="-1"
								>
								</textarea>
							</view>
							
							<view @click="$common.noMultipleClicks('SetData',SetData,true)"
							class="beiwanglu-but" 
							>
								增加
							</view>
						</view>
					
						<table >
							<!-- 表头 -->
							<thead>
								<tr >
									<th class="centers ">
										序
									</th>
									
									<th class=" ">
										内容
									</th>
									<th class="centers">
										时间
									</th>
									<th class="centers">
										操作者
									</th>
									<th class="centers">
										操作
									</th>
								</tr>
							</thead>
							<tbody>
								<!-- 内容 -->
								<tr v-for="(item,index) in resData.list" 
								:key="index" 
								
								:class="TabcheckedIndex == index ? 'goods-list-select':''"
								>
									<td class="centers  font12">
										{{index}}
									</td>
									
									
									<td class="  ">
										{{item.descr}}
									</td>
									<td class="  centers">
										{{item.dates}}
									</td>
									<td class="  centers">
										{{item.uid}}
									</td>
									<td class="centers  font12">
										<view class="flex">
											<view class="alter margin" @click="updateValue(item)">
												编辑
											</view>
											<!-- <view class="alter margin">
												删除
											</view> -->
										</view>
									</td>
									
								</tr>
							
							</tbody>
						</table>
						
					</view>
				</view>
			
		</view>
		<uni-popup ref="popup_dialog" type="dialog" title="修改备忘录" @change="popupChange">
			<view class="bot">
				<!-- 搜索 -->
				<view class="flex flex1 h100" >
					<view class="searchBoxs floatleft">
						<textarea
						v-model="dialog.value" 
						placeholder="输入内容"
						placeholder-class="placeholder-class"
						class="search-bot "
						style="margin-right: 10px;"
						>
						</textarea>
					</view>
				</view>
			</view>
			<view @click="$common.noMultipleClicks('dialogConfirm',dialogConfirm,true)"
			class="search-buts" 
			>
				<img src="../../static/img/search.png" class="ico"></img>
				修改
			</view>
		</uni-popup>
	</view>
</template>

<script>

	import empty from "@/components/admin-components/empty.vue"

	export default{
		name:'user_descr',
		components: {
			empty
		},
		data(){
			return{
				descr:'',
				resData:{},
				TabcheckedIndex:-1,//当前选中项
				dialog:{
					value:'',
					id:''
				}
			}
		},
		 // 此处定义传入的数据
		props: {
			user_id:{
				type: String,
				default: ''
			},
			
		},
		  watch: {
		
		  },
		created() {
			if(this.user_id == undefined || this.user_id == ''){
				return
			}
			this.loadData()
		},
		methods:{
			popupChange(res){
				if(res.show == false){
					this.loadData()
				}
			},
			updateValue(item){
				this.dialog.value = item.descr 
				this.dialog.id    = item.id 
				this.$refs.popup_dialog.open()
			},
			/**
			 * 获取备注
			 * 
			*/
			loadData(){
				var that = this
				that.TabcheckedIndex=0//初始化列表选中项
				
				that.$common.get_request(
					{
						type:'GetUserDescr',
						user_id:that.user_id,
					},
					(res)=>{
						that.resData = res
					}
				);
			},
			
			/**
			 * 修改备注
			 * 
			*/
			dialogConfirm(){
				var that = this
				that.$common.get_request(
					{
						type:'userUpdateDescr',
						user_id:that.user_id,
						value:that.dialog.value,
						id:that.dialog.id
					},
					(res)=>{
						that.$common.toast(res.msg)
						that.$refs.popup_dialog.close()
					}
				);
			},
			/**
			 * 提交备注
			 * 
			*/
			SetData(){
				var that = this
				that.TabcheckedIndex=0//初始化列表选中项

				that.$common.get_request(
					{
						type:'userUpdateDescr',
						user_id:that.user_id,
						value:that.descr,
					},
					(res)=>{
						that.$common.toast(res.msg)
					}
				);
			},
		}
	}
</script>

<style>
	.search-buts{
		padding: 0px 5px;
		    color: #fff;
		    border-radius: 8px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #0f66e0;
		    cursor: pointer;
		    min-width: 60px;
		    margin: auto 10px;
		    height: 32px;
		    margin-bottom: 20px;
	}
	.bot{
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 100px;
		padding: 5px 0px;
		justify-content: start;
		display: flex;
		float: left;
		font-size: 14px;
	
	}
	.search-bot {
	    padding:  5px;
	    flex: 1;
	    height: calc(100% - 10px);
	    display: flex;
	    margin: auto 0px;
	    color: #1b1b1b;
	    text-align: justify;
	    background-color: #fff;
	    border: 1px solid #d2d2d2;
	    font-size: 14px;
		    margin-left: 10px;
	}
	.beiwanglu{
		display: flex;
		flex-direction: column;
		height: 150px;
		width: 100%;
		gap: 10px;
		margin-bottom: 20px;
	}
	.beiwanglu-but{
		padding: 0px 5px;
		color: #fff;
		border-radius: 8px;
		display: flex;
		align-items: center;
		background-color: #0f66e0;
		cursor: pointer;
		min-width: 60px;
		height: 35px;
		width: 200px;
		justify-content: center;
		margin: auto;
		font-size: 16px;
	}
</style>
